<template>
  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑客户' : '新增客户'">
    <el-form
      ref="formRef"
      :model="customerForm"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="客户名称" prop="name">
        <el-input v-model="customerForm.name" />
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="customerForm.idCard" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="customerForm.phone" />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="customerForm.email" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="customerForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#19af7d" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, computed, watch, ref } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";

// 定义表单数据类型
type CustomerForm = {
  name: string;
  idCard: string;
  phone: string;
  email: string;
  sex: string;
};

const props = defineProps<{
  modelValue: boolean;
  isEdit: boolean;
  customerFormData: CustomerForm;
}>();

const emit = defineEmits(["update:modelValue", "save", "close"]);

const customerForm = reactive<CustomerForm>({
  ...props.customerFormData,
});

// 更新表单数据
watch(
  () => props.customerFormData,
  (newData) => {
    Object.assign(customerForm, newData);
  },
  { immediate: true }
);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

const formRef = ref<FormInstance>();

// 表单验证规则
const rules = reactive<FormRules<CustomerForm>>({
  name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
  idCard: [{ required: true, message: "请输入身份证", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
});

// 关闭弹窗方法
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(customerForm, props.customerFormData);
  emit("close");
};

const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      emit("save", { ...customerForm });
      ElMessage.success(props.isEdit ? "编辑客户成功" : "新增客户成功");
      handleClose();
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped></style>
